<template>
  <div class="cont">
    <div class="panel">
      <el-row :gutter="12">
        <el-col :span="8" v-for="(tab,index) in navTabs " :key="index" @click="navToFn(tab)">
          <el-card shadow="always" :class="'el-card'+index"> {{ tab.name }} </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="data">
      <el-tabs v-model="activeName" @tab-click="tabClickFn">
        <el-tab-pane label="今天" name="0"></el-tab-pane>
        <el-tab-pane label="昨天" name="1"></el-tab-pane>
        <el-tab-pane label="最近7天" name="7"></el-tab-pane>
        <el-tab-pane label="最近30天" name="30"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="d-order">
      <div class="d-o-inner">
        <el-row :gutter="12">
          <el-col :span="8">
            <el-card shadow="always">
              <div class="d-o-item">
                <span>顾客</span>
                <el-button size="small">查看</el-button>
              </div>
              <div class="d-o-item">
                <span>新增</span>
                <span>0</span>
              </div>
              <div class="d-o-item">
                <span>老顾客</span>
                <span>0</span>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="always">
              <div class="d-o-item">
                <span>下单</span>
                <!-- <el-button size="small">查看</el-button> -->
              </div>
              <div class="d-o-item">
                <span>加入购物车</span>
                <span>0</span>
              </div>
              <div class="d-o-item">
                <span>提交订单数/金额</span>
                <span>0</span>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="always">
              <div class="d-o-item">
                <span>支付</span>
                <!-- <el-button size="small">查看</el-button> -->
              </div>
              <div class="d-o-item">
                <span>成交订单数</span>
                <span>0</span>
              </div>
              <div class="d-o-item">
                <span>成交金额</span>
                <span>0</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="d-o-line"></div>
      <div class="d-o-inner d-o-inner2">
        <el-row :gutter="12">
          <el-col :span="8">
            <el-card shadow="always">
              <div class="d-o-item">
                <span>客单价</span>
                <span>0</span>
              </div>
              <div class="d-o-item">
                <span>成交金额/成交订单数</span>
                <span>0</span>
              </div>
            </el-card>
          </el-col>

          <el-col :span="8">
            <el-card shadow="always">
              <div class="d-o-item">
                <span>下单转化率</span>
                <span>0</span>
              </div>
              <div class="d-o-item">
                <span>下单人数/访问人数</span>
                <span>0</span>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="always">
              <div class="d-o-item">
                <span>下单-支付转化率</span>
                <span>0</span>
              </div>
              <div class="d-o-item">
                <span>支付人数/下单人数</span>
                <span>0</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="8">
            <el-card shadow="always">
              <div class="d-o-item">
                <span>支付转化率</span>
                <span>0</span>
              </div>
              <div class="d-o-item">
                <span>支付人数/访问人数</span>
                <span>0</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  name:'index',
  setup(){

    // 顶部导航
    let navTabs = [
      {
        name:'代发货订单',
        path:''
      },
      {
        name:'上架中的商品',
        path:''
      },
      {
        name:'总用户数',
        path:''
      },
    ]
    function navToFn(){

    }
  
    // tab标签页
    let activeName = ref(0)

    function tabClickFn(){
      console.log('tabClickFn activeName:',activeName.value)
    }
    return {
      navTabs,
      navToFn,
      activeName
    }
  }
}
</script>
<style lang="scss" scoped>
.cont{
  .panel{
    cursor: pointer;
    &:deep(.el-card){
      color:white;
      font-weight: bold;
      &.el-card0{
        background: #e64242;
      }
      &.el-card1{
        background: #11b95c;
      }
      &.el-card2{
        background: black;
      }
    }
  }
  .data{
    margin-top:20px;
  }
  .d-order{
    margin-top:20px;
    .d-o-line{
      margin-top:20px;
      border-top:1px solid #eee;
      
    }
    .d-o-inner{
      margin-top:20px;
      .el-card{
        height: 150px;
        .d-o-item{
          margin-bottom:20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
    .d-o-inner2{
      .el-row{
        margin-top:20px;
        .el-card{
          height: 100px;
        }
      }
      
    }
  }
}
</style>

